Forme HTML - checkboxes

INPUT TYPE=CHECKBOX

O eticheta INPUT cu atributul TYPE=chECKBOX ofera utilizatorului posibilitatea de a alterna intre "on" si "off". Este oarecum similar butoanelor radio. cu diferenta ca oricate checkboxes pot fi selectate sau nu. Un checkbox selectat ("on") la transmiterea formei isi va transmite propria VALUE pentru componenta respectiva. Mai multe checkboxes pot fi grupate (ca si butoanele radio) prin utilizarea aceluiasi atribut NAME.
Datele transmise in forma sunt cele specifice componentelor "on" (selectate), separate prin virgula.

Urmatorul exemplu prelucreaza "raspunsul" transmis de utilizator. Acesta trebuie sa aleaga una , mai multe, toate sau nici una din alternativele posibile. Parametrul transmis este un numar (una din valorile 1, 2, 3 ). In functie de fiecare dintre aceste valori se afiseaza un alt mesaj.

Alege-ti culoarea potrivita:

verde

galben ......

rosu

Functia caseta( ) de parametru a verifica valoarea transmisa din elementul de validare din formular din formular. Pentru fiecare apel realizeaza o cancatenare a sirului corespunzator culorii alese la variabila "raspuns" de tip sir.
Functia este apelata la evenimentul onclick realizat prin clic de mouse a checkbox-ului corespunzator si are forma:

function caseta(a)
{if(a==1)
   {alert("ai ales culoarea verde");
        raspuns=raspuns+" verde";}
else
   if(a==2)
     {alert("ai ales culoarea galben");
       raspuns=raspuns+" galben";}
   else
        { alert("ai ales culoarea rosu");
       raspuns=raspuns+" rosu"};
}

Functia raspuns_final( ) afiseaza raspunsul final si este apelata la evenimentul onclick realizat prin clic de mouse a butonului din formular si are forma:

function raspuns_final()
{if(raspuns=="")
alert("Culorile acestea nu sunt pe gustul tau!");
else
alert("Ai ales "+raspuns);
}

    Obs1. Evident sirul raspuns va ramane vid daca utilizatorul nu a ales nimic.
    Obs2. La apeluri repetate se vor realiza concatenari repetate, lucru rezolvabil prin butonul de reset si reincarcarea paginii.
     Incercati o imbunatatire a functiei pentru a rezolva problema.Poate aveti idei mai bune!!

O solutie

Forma html este urmatoarea:

<form>
Alege-ti culoarea potrivita: <p>
<input type=checkbox name="c1" value="1" onclick="caseta(1)">verde<p>
<input type=checkbox name="c1" value="2" onclick="caseta(2)">galben<p>
<input type=checkbox name="c1" value="3" onclick="caseta(3)">rosu<p>
<input type=button value="apasa" onclick="raspuns_final()" >
<p>
<input type=reset value="resetare">
</form>